<?php
$caption = BUtils::T('restaurants_lbl');
$special_lbl = BUtils::T('special_lbl');
$see_detail_lbl = BUtils::T('see_detail_lbl');

$this->pageTitle = BUtils::T('meta_title_seo_restaurant') . ' | Yamii';
if (empty($_GET['tag'])) {
	$this->breadcrumbs=array(
		$caption,
	);
} else {
	$searchTag = isset($GLOBALS['LNG'][$_GET['tag']]) ? $GLOBALS['LNG'][$_GET['tag']] : $_GET['tag'];
	$this->breadcrumbs=array(
		$caption => Yii::app()->createUrl('/'.$this->id),
		$searchTag,
	);
	$this->pageTitle = $caption . '/' . $searchTag;
}

//request markers url
if ($debug == 1) {
	$url = Yii::app()->createUrl('restaurant/markers', array('tag'=>Yii::app()->request->getQuery('tag'), 'debug'=>1));
} else {
	$url = Yii::app()->createUrl('restaurant/markers', array('tag'=>Yii::app()->request->getQuery('tag')));
}
?>
<style>
#theMap {background:#0ae;}
#theList {overflow:auto;}
</style>
<div class="row">
	<div class="span9 relative">
		<div class="box_white">
			<div id="theMap"></div>
			<div id="theMapPopup" class="map-popup-fields"></div>
		</div>
		<div style="margin-bottom:8px; position:absolute; top:10px; left:10px;">
			<a class="btn btn-small locate-me"><i class="gicon-riflescope"></i> <?php echo BUtils::T('locate_me_btn'); ?></a>
			<span class="label label-inverse none" id="my-location"></span>
		</div>
	</div>
	<div class="span3">
		<div class="box_white">
			<div id="theList"></div>
		</div>
	</div>
</div>
<script type="text/javascript">
var refresh = true;
var markers = [];
var mapCav = null;
var activePin = {id:null,style:2};
var locate = {};

$(function() {
	mapCav = $("#theMap").isMapCanvas('<?php echo Yii::app()->baseUrl; ?>', 1);
	var setHeight = $(window).height() - 100;
	if (setHeight < 500) setHeight = 500;
	$('#theMap, #theList').height(setHeight);
	$(window).bind("resize", function() {
		setHeight = $(window).height() - 100;
		if (setHeight < 500) setHeight = 500;
		$('#theMap, #theList').height(setHeight);
	});
	//load data when map is loaded.
	mapCav.triggerMapIdle(function() {
		if (refresh) {
			refresh = false;
			request_marker(mapCav.getBounds());
		}
	});
	//load data when bounds are changed.
	mapCav.bind('bounds_changed', function() {
		request_marker(mapCav.getBounds());
	});
	//set the location
	$('.locate-me').click(function () {
		mapCav.findMe(function(lat, lng){
			locate.lat = lat;
			locate.lng = lng;
			var geocoder = new google.maps.Geocoder();
			var latlng = new google.maps.LatLng(locate.lat, locate.lng);
			geocoder.geocode({'latLng': latlng}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					$('#my-location').fadeIn('fast').html(results[0]['formatted_address']);
				} else {
					$('#my-location').fadeOut('fast');
				};
			});
		});
	});
});

function request_marker(bounds) {
	$.ajax({
		url: '<?php echo $url; ?>',
		type: 'POST',
		data: {bounds:bounds},
		dataType: 'json',
		beforeSend: function(xhr) {
			$('#theList').html('<img src="<?php echo Yii::app()->baseUrl; ?>/img/loader-bar.gif" style="margin-top:20px;" />');
		},
		error: function() {
			
		},
		success: function(json) {
			$.map(json.markers, function(v, i) {
				var pinId = 'mid_' + v.id;
				mapCav.pin(pinId, {
					style: (v.status == 1) ? (v.specials > 0) ? 4 : 2 : 20,
					latitude: v.lat,
					longitude: v.lng,
					onClick: function() {
						mapInfoWindow(pinId, v);
					}
				});
			});
			//mapCav.cluster();//TODO
			$('#theList').html(json.html);
			//bind map locate
			$('.map-locate').click(function() {
				var pinId = $(this).data('pin-id');
				var pinIndex = $(this).data('pin-i');
				if (pinIndex >= 0) {
					mapInfoWindow(pinId, json.markers[pinIndex]);
				}
			});
			//bind popup-windows + tips
			$('.popup-window').colorbox({transition:'none'});
			$('.tooltip-onleft').tooltip({placement:'left'});
			$('.tooltip-onright').tooltip({placement:'right'});
			$('.tooltip-onbottom').tooltip({placement:'bottom'});
			$('.tooltip-ontop').tooltip({placement:'top'});
		}
	});
}

function mapInfoWindow(pinId, marker) {
	if (!marker.lat || !marker.lng) {return;}
	//mapCav.panTo(marker.lat, marker.lng)
	//clear last activePinId
	if (activePin.id) {
		$('#'+activePin.id).removeClass('active');
		mapCav.pin(activePin.id, {style:activePin.style, zIndex:0});
	}
	mapCav.removeAllBubbles();
	mapCav.bubble(pinId, {
		latitude: marker.lat,
		longitude: marker.lng,
		content: marker.body,
		offsetVertical: -4,
		size: 'small'
	});
	activePin.id = pinId;
	activePin.style = (marker.status == 1) ? (marker.specials > 0) ? 4 : 2 : 20;
	mapCav.pin(pinId, {style: 3, zIndex: 9999});
	//scroll tp that pin
	$('#success_result').scrollTo('#'+pinId, 500, {queue:true});
	$('#'+pinId).addClass('active');
}
</script>